@import "reset.css";
@import "../font/iconfont.css";
html,body{
    height: 100%;
}
body{
    max-width: 7.5rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
// 头部标题部分
header{
    height: 1.85rem;
    background: linear-gradient(#ff6040,#ff7661,#ff8476);
    padding-top: .43rem;
    box-sizing: border-box;
    .title{
        height: .64rem;
        display: flex;
        color: #ffdfd8;
        align-items: center;
        margin-left:.12rem;
        h2{
            font-size: .3rem;
            margin: 0 1.38rem 0 3.26rem;
        }
        p{
            width: 1.72rem;
            height: .62rem;
            border: 1px solid #ff8a6f;
            border-radius: .3rem;
            position: relative;
            display: flex;
            justify-content: space-around;
            align-items: center;

            span{
                &:nth-child(1){
                    font-size: .4rem;
                }
                &:nth-child(2){
                    font-size: .3rem;
                }
            }
            
            i{
                width: 1px;
                height: .37rem;
                background:#ff8a6f; 
                position: absolute;
                top: .12rem;
                left: .86rem;
            }
        }
    }
    nav{
        display: flex;
        justify-content: space-around;
        position: relative;
        a{
            color: #fff3f2;
            margin-top:.33rem;
            font-size: .26rem;
            &.cur{
                font-size: .3rem;
                color: #fff;
                &::after{
                    content: "";
                    display: block;
                    width: .4rem;
                    height: .04rem;
                    background: #fff;
                    position: absolute;
                    left:.78rem;
                    bottom: -.08rem; 
                }
            }
        }  
    }
}
#head-bottom{
    height: .72rem;
    display: flex;
    align-items: center;
    background: #fff;
    padding-right: .2rem;
    span{
        &:nth-of-type(1){
            width: .28rem;
            height: .28rem;
            border: 1px solid #a5a5a5;
            background: #f2f2f2;
            border-radius: .14rem;
            margin: 0 .2rem;
        }
        &:nth-of-type(2){
            font-size: .3rem;
            color: #333;
            font-weight: bold;
        }
        &:nth-of-type(3){
            font-size: .22rem;
            color: #4b4b4b;
            margin-left:3.2rem;
        }
        &:nth-of-type(4){
            font-size: .22rem;
            color: #ff6040;
        }
    }
    b{
        margin: 0 .2rem;
        color: #979797;
    }
}
// 主体内容部分
main{
    flex: 1;
    overflow: auto;
    margin-bottom: 2.64rem;
    .con{
        background: #fff;
        margin: .2rem 0 .4rem;
        overflow: auto;
        padding: .2rem 0;
        article{
            display: flex;
            align-items: center;
            margin-top: .4rem;
            &:nth-child(1){
                margin-top: 0;
            }
            span{
                width: .28rem;
                height: .28rem;
                border: 1px solid #a5a5a5;
                background: #f2f2f2;
                border-radius: .14rem;
                margin: 0 .2rem; 
            }
            sup{
                font-size: .3rem;
                color: #ff6040;
                margin: 0 .2rem;
            }
            img{
                width: 2.16rem;
                margin-right: .3rem;
            }
            .text{
                width: 4.16rem;
                p{
                    &:nth-child(1){
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: .28rem;
                        color: #333;
                    }
                    &:nth-child(2){
                        color: #999;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        font-size: .24rem;
                    }
                    &:nth-child(3){
                        select{
                            width: 40%;
                            height: .32rem;
                            background: #f2f2f2;
                            border: none;
                            font-size: .18rem;
                            color: #3b3b3b;
                            padding: 0 .07rem;
                            line-height: .32rem;
                            margin: .3rem 0 .1rem 0;
                        }
                        
                    }
                    &:nth-child(4){
                        font-size: .18rem;
                        color: #ff765b;
                    }
                    &:nth-child(5){
                        font-size: .3rem;
                        color: #ff6040;
                        margin-top: .1rem;
                        
                        del{
                            font-size: .14rem;
                            color: #989898;
                            margin-right: .8rem;
                        }
                        b{
                            font-size: .14rem;
                        }
                        em{
                            display: inline-block;
                            width: .8rem;
                            height: .4rem;
                            background: #f2f2f2;
                            color: #333;
                            font-size: .2rem;
                            line-height: .4rem;
                            text-align: center;
                            margin: 0 .1rem;
                        }
                        strong{
                            height: .4rem;
                            color: #333;
                            font-size: .28rem;
                            font-weight: bold;
                            line-height: .4rem;    
                        }
                    }
                }
            }
        
        }
    }
}
// 页脚
footer{
    width: 7.5rem;
    height: 2.64rem;
    background: #fff;
    position: fixed;
    left: 50%;
    bottom: 0;
    margin-left: -3.75rem;
    .top{
        height: .98rem;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span{
            width: .28rem;
            height: .28rem;
            border: 1px solid #a5a5a5;
            background: #f2f2f2;
            border-radius: .14rem;
            margin: 0 .2rem; 
        }
        b{
            font-size: .3rem;
            color: #333;
            font-weight: bold;
            margin-left: -.5rem;
        }
        p{
            display: flex;
            flex-direction: column;
            align-items: center;
            em{
                font-size: .3rem;
                font-weight: bold;
                color: #333;
                &.cur{
                    color: #ff6040;
                }
            }
            i{
                font-size: .18rem;
                color: #a3a3a3;
            }
        }
        input{
            height: 100%;
            width: 2.2rem;
            background: #ff6040;
            color: #fff;
            line-height: .98rem;
            text-align: center;
            font-size: .3rem;
            border: none;
        }
    }
    .bottom{
        display: flex;
        justify-content: space-around;
        align-items: center;
        p{
            display: flex;
            flex-direction:column;
            font-size: .18rem;
            color: #a1a1a1;
            text-align: center;
    
            i{
                font-size: .5rem !important;
                color: #999;
            }
    
            &.cur{
                color: #ff6040;
                i{
                    color: #ff6040;
                }
            }
        }
    }
}